
//实现直线运动
var canvasW = 400;
var canvasH = 400;
var ctx = CanvasUtil.stroke('drawing',0,0,canvasW,canvasH,1,"#ff0000");
var img = document.images[0];
var imgW = 41,imgH=50;
var stx = 0,sty = 0;
ctx.drawImage(img,0,0,imgW,imgH);

var tx = 300;
var ty = 300;
var speed = 5;

movieId = setInterval(move,100);

function move() {
    var dy = ty - sty;
    var dx = tx-stx;
    var radian = Math.atan2(dy,dx);
    var vx = speed * Math.cos(radian);
    var vy = speed * Math.sin(radian);
    ctx.clearRect(stx,sty,imgW,imgH);
    console.log("------------------vx,vy=",vx,vy);
    dx = tx - stx;
    dy = ty - sty;
    vx = dx>0?Math.min(dx,vx):Math.max(dx,vx);
    vy = dy>0?Math.min(dy,vy):Math.max(dy,vy);
    stx += vx;
    sty += vy;
    
    ctx.drawImage(img,stx,sty,imgW,imgH);
    if (stx==tx && sty==ty) {
        clearInterval(movieId);
        movieId = 0;
        console.log('stop tx,ty=',tx,ty);
    }
    //console.log(stx,sty);
}

var c = document.getElementById("drawing");
c.addEventListener('click',onClick);
function onClick(event) {
    console.log('event.offsetX',event.offsetX);    
    console.log('event.offsetY',event.offsetY);    
    if (!movieId) {
        movieId = setInterval(move,100);
        stx = tx;
        sty = ty;
        console.log('stx,sty',stx,sty);    
    }
    tx = event.offsetX;
    ty = event.offsetY;
    
}